<template>
  <div class="home-container">
   <van-nav-bar fixed>
      <template #title>
        <van-button type="info" round icon="search" size="small" class="search-btn"
        to='/search'
        >搜索</van-button>
      </template>
   </van-nav-bar>
   <!-- 标签栏 -->
   <van-tabs v-model="active" swipeable animated swipe-threshold="3" class="channel-tags">
      <van-tab
      v-for="obj in channels" :key="obj.id"
      :title="obj.name"
      >
      <article-list :channel='obj'></article-list>
      </van-tab>

      <template #nav-right>
        <div class="placeholder"></div>
          <div class="maore-btn" @click="isChannelEditShow = true">
            <i class="iconfont icon-gengduo"></i>
          </div>
      </template>
   </van-tabs>

   <!-- 频道编辑弹出层 -->
   <van-popup
    v-model="isChannelEditShow"
    position="bottom"
    :style="{ height: '100%' }"
    closeable
    close-icon-position="top-left"
    class="edit-channel-popup"
   >

   <channel-edit
    :myChannels="channels"
    :allChannels="allChannels"
    :active="active"
    @updateChannel="updateChannelFn"
   >
   </channel-edit>
   </van-popup>
  </div>
</template>

<script>

import { getUserChannelsAPI, getAllChannelsAPI } from '../../api/index.js'
import { getItem } from '../../utils/storage.js'
import ArticleList from './components/article-list.vue'
import ChannelEdit from './components/channel-edit.vue'
export default {
  name: 'HomeIndex',
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      active: 0,
      channels: [], // 频道数据
      allChannels: [], // 频道数据
      isChannelEditShow: false // 频道编辑是否显示
    }
  },
  created () {
    this.loadChannels() // 获取频道列表
    this.loadAllChannels() // 获取所有频道列表
  },
  methods: {
    // 获取用户频道列表
    // 如果用户已登录，从接口获取频道数据
    // 如果用户未登录但是本地存储没有数据，从接口获取
    // 如果用户未登录但是本地存储有数据，从本地存储获取

    async loadChannels () {
      try {
        const token = this.$store.state.user.token
        const localChannels = getItem('TOUTIAO_CHANNELS')
        if (token || !localChannels) {
          const res = await getUserChannelsAPI()
          // console.log(res)
          this.channels = res.data.data.channels
        } else {
          this.channels = localChannels
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 获取所有频道
    async loadAllChannels () {
      try {
        const res = await getAllChannelsAPI()
        // console.log(res)
        this.allChannels = res.data.data.channels
      } catch (error) {
        console.log(error)
      }
    },
    // 根据组件传递过来的索引值，更改active的值，切换频道
    // isShow用于判断是否需要关闭弹出层，在参数中使用等号赋值表示设置默认值，当没有这个参数传过来时就使用默认值，有传参就是用传过来的参数
    updateChannelFn (index, isShow = false) {
      this.active = index
      if (!isShow) {
        // 关闭编辑弹出层
        this.isChannelEditShow = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.home-container {
  :deep(.van-nav-bar__title) {
    //  取消最大宽度限制
    max-width: unset;
  }
  .search-btn {
    background-color: #5babfb;
    width: 555px;
    height: 64px;
    font-size: 28px;
    color: #fff;
    border: none;
    .van-icon  {
      font-size: 32px;
      color: #fff;
    }
  }
  :deep(.channel-tags){
    padding-top: 180px;
    padding-bottom: 100px;
    .van-tabs__wrap  {
      position: fixed;
      top: 92px;
      left: 0;
      right: 0;
      z-index: 1;
    }

      .van-tab {
          min-width: 200px;
          border-right: 1px solid #edeff3;
          font-size: 28px;
          color: #777;
        }
        .van-tabs__line {
          width: 31px;
          height: 6px;
          background-color: #3296fa;
        }
        .placeholder {
          width: 66px;
          height: 82px;
          flex-shrink: 0;
        }
        .maore-btn {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 66px;
          height: 82px;
          position: fixed;
          right: 0;
          background-color: #fff;
          opacity: 0.9;
          .iconfont {
            font-size: 33px;
            color: #333;
          }
        }
  }
  .edit-channel-popup {
    box-sizing: border-box;
    padding-top: 100px;
  }
}
</style>
